<template>
	<view class="container">
		<view class="search card">
			<image src="/static/image/search.png" mode=""></image>
			<input type="text" placeholder="搜索" />
		</view>

		<view class="card goodsCard">
			<view class="btnList">
				<view class="left">
					<text>全部</text>
					<text>5</text>
					<image src="/static/image/down.png" mode=""></image>
				</view>
				<view class="right">
					推出管理
				</view>
			</view>
			<view class="list">
				<view class="item" v-for="item in 3">
					<image class="radio" src="/static/image/raido.png " mode=""></image>
					<showCaseCard class="showCaseCard" />
				</view>
			</view>
		</view>
		<view style="height: 120rpx;" v-if="false">
			<view class="btn">
				管理橱窗
			</view>
		</view>

		<view style="height: 120rpx;">
			<view class="btn delBtn">
				<view class="left">
					<image src="/static/image/raido.png" mode=""></image>
					<text>全选</text>
				</view>
				<view class="right">
					删除
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import showCaseCard from '@/components/showCaseCard.vue';
	export default {
		components: {
			showCaseCard
		},
		data() {
			return {

			};
		}
	}
</script>

<style>
	page {
		background-color: rgba(246, 247, 248, 1);
	}
</style>

<style lang="less" scoped>
	.container {

		.goodsCard {
			width: 100%;

			.list {
				.item {
					display: flex;
					align-items: center;

					&:last-child {
						/deep/ .showCaseCard {
							border-bottom: 0 !important;
						}

					}

					.radio {
						flex-shrink: 0;
						width: 36rpx;
						height: 36rpx;
						margin-right: 30rpx;
					}
				}
			}

			.btnList {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.right {
					padding: 5rpx 24rpx;
					height: 52rpx;
					border-radius: 500rpx;
					text-align: center;
					line-height: 52rpx;
					border: 1rpx solid rgba(255, 141, 26, 1);
					font-size: 30rpx;
					font-weight: 500;
					color: rgba(255, 141, 26, 1);
				}

				.left {
					display: flex;
					align-items: center;
					font-size: 30rpx;
					font-weight: 700;
					color: rgba(42, 42, 42, 1);

					text {
						margin-right: 10rpx;
					}

					image {
						width: 30rpx;
						height: 30rpx;
						vertical-align: middle;
						margin-bottom: -15rpx;
					}
				}
			}
		}

		.search {
			width: 670rpx;
			height: 68rpx;
			margin: 30rpx;
			display: flex;
			align-items: center;

			image {
				width: 26rpx;
				height: 26rpx;
				margin-right: 15rpx;
			}
		}

		.btn {
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			height: 112rpx;
			background: rgba(255, 127, 6, 1);
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 30rpx;
			font-weight: 700;
			color: rgba(255, 255, 255, 1);
		}

		.delBtn {
			display: flex;
			align-items: center;
			justify-content: space-between;
			background-color: #fff;
			padding: 0 30rpx;

			.right {
				width: 170rpx;
				height: 80rpx;
				border-radius: 80rpx;
				text-align: center;
				line-height: 80rpx;
				background: rgba(252, 80, 0, 1);
			}

			.left {
				image {
					width: 36rpx;
					height: 36rpx;
				}
			}
		}
	}
</style>